import './style/index.css';
import { createRoot } from 'react-dom/client';
import { getIcon } from '@/utils';
import { ICON_KEYS } from '@/components/icons';
import toast, { Toaster } from 'react-hot-toast';
import { RadioButton } from './components';
import { useState } from 'react';

const root = createRoot(document.getElementById('root'));

function capitalizeFirstLetter(string: string) {
   if (!string) return string;
   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

const IconPage = () => {
   const handleCopy = async (value) => {
      await navigator.clipboard.writeText(value);
      toast.success(`复制成功: ${value}`);
   };

   const [type, setType] = useState('js');

   const handleChange = (value) => {
      setType(value);
   };

   return (
      <div className="p-2 font-mono">
         <Toaster />
         <div className="my-2">
            <RadioButton
               value={type}
               onChange={handleChange}
               options={[
                  { value: 'component', label: '使用组件' },
                  { value: 'js', label: '使用js' },
               ]}
            />
            <div className="flex justify-center space-x-2">
               {type === 'component' ? (
                  <div className="p-2 border bg-slate-900 text-slate-50 w-fit">
                     {`import { BillIcon } from '@/components/icons'; `}
                     <br />
                     <br />
                     {` <BillIcon type="primary" size={16}/> `}
                  </div>
               ) : (
                  <div className="p-2 border bg-slate-900 text-slate-50 w-fit">
                     {`import { getIcon } from '@/utils'; `}
                     <br />
                     <br />
                     {` <div> { getIcon('bill', { type:'primary', size: 16 }) } </div> `}
                  </div>
               )}
            </div>
         </div>
         <div className="grid-cols-2 lg:grid-cols-8 grid gap-2 ">
            {ICON_KEYS.map((key) => {
               const value =
                  type === 'component'
                     ? `${capitalizeFirstLetter(key)}Icon`
                     : key;
               return (
                  <div
                     className="rounded-sm  flex justify-center cursor-pointer items-center pt-4 shadow-sm flex-col hover:scale-105 transition duration-300 ease-out hover:bg-indigo-100"
                     onClick={handleCopy.bind(null, value)}
                  >
                     {getIcon(key, {
                        type: 'primary',
                     })}
                     <span className="select-none">{value}</span>
                  </div>
               );
            })}
         </div>
      </div>
   );
};

root.render(<IconPage />);
